<template>
	<view class="container">
		<view class="login-head-box">
			<text class="title">找回密码</text>
		</view>
		<view class="login-head-tab">
			<text @click="findMethod=1" class="text-box line" :class="{active:findMethod===1}">手机找回</text>
			<text @click="findMethod=2" class="text-box" :class="{active:findMethod===2}">邮箱找回</text>
		</view>
		<view class="login-form-list">
			<!--手机取回.开始-->
			<block v-if="findMethod===1">
				<view class="item-box">
					<input v-model="phoneModel.phone" type="text" placeholder="请输入手机号码" class="input" />
				</view>
				<view class="item-box">
					<view class="left">
						<input v-model="phoneModel.codeValue" type="text" placeholder="请输入验证码" class="input" />
					</view>
					<view class="right">
						<text v-if="timer>0" class="send gray">重新获取({{timer}}s)</text>
						<text v-else @click="sendPhoneCode" class="send">获取验证码</text>
					</view>
				</view>
				<view class="item-box">
					<input v-model="phoneModel.newPassword" password placeholder="请输入新密码" class="input" />
				</view>
				<view class="item-box">
					<input v-model="phoneModel.confirmPassword" password placeholder="请再次输入新密码" class="input" />
				</view>
			</block>
			<!--手机取回.结束-->
			<!--邮箱取回.开始-->
			<block v-if="findMethod===2">
				<view class="item-box">
					<input v-model="emailModel.email" type="text" placeholder="请输入邮箱账户" class="input" />
				</view>
				<view class="item-box">
					<view class="left">
						<input v-model="emailModel.codeValue" type="text" placeholder="请输入验证码" class="input" />
					</view>
					<view class="right">
						<text v-if="timer>0" class="send gray">重新获取({{timer}}s)</text>
						<text v-else @click="sendEmailCode" class="send">获取验证码</text>
					</view>
				</view>
				<view class="item-box">
					<input v-model="emailModel.newPassword" password placeholder="请输入新密码" class="input" />
				</view>
				<view class="item-box">
					<input v-model="emailModel.confirmPassword" password placeholder="请再次输入新密码" class="input" />
				</view>
			</block>
			<!--邮箱取回.结束-->
			<view class="btn-box">
				<button @click="submitForm" class="btn submit">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: 0, //计时器
				findMethod: 1, //1手机找回2邮箱找回
				phoneModel: {
					method: 1,
					phone: null,
					newPassword: null,
					confirmPassword: null,
					codeKey: null,
					codeValue: null
				},
				emailModel: {
					method: 2,
					email: null,
					newPassword: null,
					confirmPassword: null,
					codeKey: null,
					codeValue: null
				}
			}
		},
		methods: {
			//发送手机验证码
			sendPhoneCode(){
				let _this = this;
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(_this.phoneModel.phone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				//发送短信
				_this.$api.request({
					url: `/verifycode/mobile/${_this.phoneModel.phone}`,
					loading: true,
				}).then((res) => {
					_this.timer = 120; //设置120秒
					_this.countDown();//开始倒计时
					_this.phoneModel.codeKey = res.data.codeKey;
				})
			},
			//发送邮件验证码
			sendEmailCode(){
				let _this = this;
				if(!/(^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$)/.test(_this.emailModel.email)){
					this.$api.msg('请输入正确的邮箱账户');
					return;
				}
				//发送邮件
				_this.$api.request({
					url: `/verifycode/email/${_this.emailModel.email}`,
					loading: true,
				}).then((res) => {
					_this.timer = 120; //设置120秒
					_this.countDown();//开始倒计时
					_this.emailModel.codeKey = res.data.codeKey;
				})
			},
			//计时器
			countDown(){
				let _this = this;
				if(_this.timer>0){
					_this.timer--;
					setTimeout(function() {
						_this.countDown();
					},1000)
				}
			},
			//提交表单
			submitForm(){
				let _this = this;
				if(_this.findMethod===1){
					let model = _this.phoneModel;
					if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(model.phone)){
						_this.$api.msg('请输入正确的手机号码');
						return;
					}
					if(!model.codeKey){
						_this.$api.msg('请先获取手机验证码');
						return;
					}
					if(!model.codeValue){
						_this.$api.msg('请输入手机验证码');
						return;
					}
					if(!/(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$)/.test(model.newPassword)){
						_this.$api.msg('新密码含字母数字且大于6位');
						return;
					}
					if(model.newPassword != model.confirmPassword){
						_this.$api.msg('确认密码与新密码不一致');
						return;
					}
					_this.submitData(model);
					
				}else if(_this.findMethod===2){
					let model = _this.emailModel;
					if(!/(^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$)/.test(model.email)){
						_this.$api.msg('请输入正确的邮箱账户');
						return;
					}
					if(!model.codeKey){
						_this.$api.msg('请先获取邮箱验证码');
						return;
					}
					if(!model.codeValue){
						_this.$api.msg('请输入邮箱验证码');
						return;
					}
					if(!/(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$)/.test(model.newPassword)){
						_this.$api.msg('密码要含字母数字且大于6位');
						return;
					}
					if(model.newPassword != model.confirmPassword){
						_this.$api.msg('确认密码与新密码不一致');
						return;
					}
					_this.submitData(model);
				}
			},
			//请求API接口
			submitData(model){
				let _this = this;
				_this.$api.request({
					url: `/auth/reset`,
					method: "post",
					load: true,
					data: model
				}).then((res) => {
					uni.showModal({
					    title: '修改密码成功',
					    content: '是否马上登录会员账户？',
						cancelText: '回首页',
						confirmText: '去登录',
					    success: function (res) {
							if (res.confirm) {
								//跳转登录页
								uni.navigateTo({
									url: '../login',
								});
					        } else if (res.cancel) {
								//跳转首页
								uni.switchTab({
									url: '../../goods/index',
								});
					        }
					    }
					})
					
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
</style>
